<template>
  <div class="header">
    <div class="headerLeft">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        text-color="#888">
        <el-menu-item v-for="item in menuList" :index="item.path" :key="item.path">
          <router-link :to="item.path"> {{ item.name }}</router-link>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="headerRight">
      <el-button>Source code</el-button>
      <img src="../assets/404_images/404_cloud.png" alt="" />
      <span>{{ role }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ScrollTop',
    data() {
      return {
        activeIndex: this.$route.path,
        menuList: [],
        role: "管理员"
      };
    },
    created() {
      this.menuList = this.$router.options.routes[0].children;
    },
    watch: {
      $route(to, from) {
        this.activeIndex = to.path;
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        // console.log(key, keyPath);
      }
    }
  };
</script>